<template>
	<view class="repairs_add">


		<picker @change="bindPickerChange" :value="typeIndex" range-key="name" :range="repairsType">
			<view class="form_item">
				<view class="left">
					类型
				</view>
				<view class="right">

					<label>
						{{typeIndex==-1 ? '请选择问题类型' : repairsType[typeIndex].name}}
					</label>
					<span class="icon iconfont icon-youjiantou"></span>
				</view>
			</view>
		</picker>

		<view class="form_item">
			<view class="left">
				地址
			</view>
			<view class="right">
				<input type="text" v-model="formData.address" placeholder="请输入地址" />
				<span class="icon iconfont icon-youjiantou"></span>
			</view>
		</view>
		<view class="form_item">
			<view class="left">
				联系电话
			</view>
			<view class="right">
				<input type="tel" v-model="formData.tel" placeholder="请输入电话" />
				<span class="icon iconfont icon-youjiantou"></span>
			</view>
		</view>
		<textarea class="textarea" v-model="formData.content" placeholder="请输入保修内容"></textarea>
		<view class="imglist">
			<view class="img" v-for="item in formData.images" :key="item.url">
				<image mode="aspectFill" :src="imgBaseUrl+item.url"></image>
			</view>
		</view>
		<view @click="chooseImage" class="">
			选择文件
		</view>
		<button @click="submit" class="add">提交</button>
	</view>
</template>

<script>
	import {
		chooseImage,
		uploadFile
	} from '../../utils/fileUtil.js'
	import {
		BASE_URL,
		BASE_IMG_URL
	} from '../../utils/config.js'
	import {
		getRepairsType,
		repairsAdd
	} from '../../service/repairs.js'
	export default {
		data() {
			return {
				imgBaseUrl: BASE_IMG_URL,
				typeIndex: -1,
				repairsType: [],
				formData: {
					address: "",
					content: "",
					tel: "",
					type: null,
					images: []
				}

			};
		},
		onLoad() {
			this.getRepairsType();
		},
		methods: {

			async submit() {

				if (!this.formData.type) {
					return uni.showToast({
						icon: "none",
						title: "请选择类型"
					})
				}
				if (!this.formData.address) {
					return uni.showToast({
						icon: "none",
						title: "输入地址"
					})
				}

				const res = await repairsAdd(this.formData);

				console.log(res);

			},

			async getRepairsType() {

				const res = await getRepairsType();
				this.repairsType = res.list;
				console.log(res.list);

			},

			bindPickerChange(e) {
				console.log("选择", e.detail.value);
				this.typeIndex = e.detail.value;

				this.formData.type = this.repairsType[e.detail.value].id;

			},
			async chooseImage() {
				let that = this;

				const files = await chooseImage();
				for (let i = 0; i < files.length; i++) {
					const url = await uploadFile(files[i]);
					this.formData.images.push({url});
				}



				// files.forEach(item=>{



				// 				uni.uploadFile({
				// 					url: BASE_URL + 'upload/add', //仅为示例，非真实的接口地址
				// 					filePath: item,
				// 					name: 'file',
				// 					header: {
				// 						'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dpbk5hbWUiOiI1ODUwIiwidXNlclR5cGUiOiJNRU1CRVIiLCJleHAiOjE3NTc1NzQyMjV9.kNogHvf9Jau5i3Gdavq9Gqjzi8pqKwgsQb0kjLph1nI'
				// 					},
				// 					success: (uploadFileRes) => {


				// 						let data = JSON.parse(uploadFileRes.data);
				// 						// that.imgs.push(data.data);
				// 						if(data.errCode===10000){
				// 								that.formData.images.push({url:data.data});
				// 						}


				// 						console.log(data.data);
				// 					}
				// 				});
				// })

				console.log("选中的图片", files);



				// uni.chooseImage({
				// 	count: 6, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['album', 'camera'], //从相册选择
				// 	success: function(res) {

				// 		res.tempFilePaths.forEach((item) => {
				// 			console.log(item);
				// 			uni.uploadFile({
				// 				url: BASE_URL + 'upload/add', //仅为示例，非真实的接口地址
				// 				filePath: item,
				// 				name: 'file',
				// 				header: {
				// 					'Authorization': uni.getStorageSync("token")
				// 				},
				// 				success: (uploadFileRes) => {


				// 					let data = JSON.parse(uploadFileRes.data);
				// 					// that.imgs.push(data.data);

				// 					that.formData.images.push({url:data.data});
				// 					console.log(data.data);
				// 				}
				// 			});

				// 		})


				// 	}
				// });

			}
		}
	}
</script>

<style lang="less">
	@import url('../../static/css/repairs.less');

	.imgBox {
		width: 300rpx;
		height: 300rpx;
		background-color: red;

		.imgtest {
			width: 100%;
			height: 100%;
		}
	}

	.imglist {
		display: flex;
		ss flex-wrap: wrap;

		.img {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>